<template>
	<div class='list' ref='wrapper'>

		<div>
			<!--热门城市-->
			<div class='city-list'>
				<div class='city-title'>
					热门城市
				</div>
				<ul class='city-data'>
					<li v-for='item in hotCities'
					@click='homeclick(item.name)'
					>
						{{item.name}}
					</li>
				</ul>
			</div>
			<!--热门城市  end-->


			<!--字母排序-->
			<div class='city-list'>
				<div class='city-title'>
					字母排序
				</div>
				<ul class='city-sort'>
					<li 
					v-for='(item,key) in cities'
					@click='sortClick'
					>
						{{key}}
					</li>
				</ul>
			</div>
			<!--字母排序 end-->



			<div class='city-list' 
			v-for='(item,key) in cities'
			:key='key'
			:ref='key'
			>
				<div class='city-title'>
					{{key}}
				</div>
				<ul class='city-data'>
					<li 
					v-for='cityItem in item'
					@click='homeclick(cityItem.name)'
					>

						{{cityItem.name}}

					</li>
				</ul>
			</div>

		</div>
	</div>
</template>

<script type="text/javascript">
import BScroll from 'better-scroll'
import {mapState,mapMutations} from 'vuex'
export default {

	props:['cities','hotCities'],
	data(){
		return {
			scroll:"",
			targets:""
		}
	},
	computed:{
		...mapState(['city'])
	},
	methods : {
		sortClick(e){
			this.targets = e.target.innerText;
		},
		homeclick(city){
			//city 赋值给 state中的city
			this.cityChange(city)
			this.$router.push('/')
		},
		...mapMutations(["cityChange"])	
	},
	mounted(){
		this.scroll= new BScroll( this.$refs.wrapper  )
	},
	watch : { //监听

		targets(){

			const dom = this.$refs[this.targets][0]

			this.scroll.scrollToElement(dom)

		}

	}

}
</script>

<style type="text/css" scoped>
.list{
	position: absolute;
	top:.86rem;
	left: 0;
	bottom:0;
	right: 0;
	overflow: hidden;

}
.city-sort{
	position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
    padding: .3rem 0;
}
.city-sort li {
	width: 16.66%;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    text-align: center;
    float: left;
    position: relative;
    z-index: 10;
    color: #212121;
}
.city-title{
	font-size: .24rem;
    padding: .24rem .3rem;
    background: #ddd;
    width:100%;
    height: .24rem;
    color:#000;
}
.city-data{
	list-style: none;
	position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
}
.city-data:before{
	width: 33.33%;
    left: 33.33%;
    height: 100%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
    content: '';
    position: absolute;
}
.city-data li{
	height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    text-align: center;
    border-bottom: .02rem solid #ddd;
    margin-bottom: -1px;
    float: left;
    position: relative;
    z-index: 10;
    color: #212121;
    width: 33.33%;
}
</style>